<template>
  <span v-loading="loading" class="mx-3">
    <el-tooltip content="开机" placement="top">
      <el-button size="small" type="success" :icon="CircleCheck" circle @click="sendSet('start')"
        :disabled="props.state==0?true:false" />
    </el-tooltip>
    <el-tooltip content="关机" placement="top"><el-button size="small" type="info" :icon="SwitchButton" circle
        @click="sendSet('stop')" :disabled="props.state == 0 ? true : false" /></el-tooltip>
    <el-tooltip content="重启" placement="top"><el-button size="small" type="warning" :icon="Refresh" circle
        @click="sendSet('reboot')" :disabled="props.state == 0 ? true : false" /></el-tooltip>
  </span>
</template>

<script setup>
import {
  Refresh,
  SwitchButton,
  CircleCheck,
} from "@element-plus/icons-vue";
import { startUserContainer} from "@/api";
import {ref } from "vue";
import { message } from "@/utils/message";

const props = defineProps({
  id: [String, Number],
  state: [String, Number],

});
const loading = ref(false);

// 启动容器
function sendSet(type = "start") {
  loading.value = true;
  startUserContainer(type, props.id)
    .then(res => {
      if (res.data.code === 200) {
        message("操作成功", {
          type: "success"
        });
      } else {
        message(res.data.data, {
          type: "error"
        });
      }
      loading.value = false;
    })
    .catch(e => {
      message(e.response.data.description, {
        type: "error"
      });
      loading.value = false;
    });
}
</script>

<style lang="scss" scoped></style>
